<template>
  <div ref="chart" class="waper"> </div>
</template>

<script lang="ts" setup>
  import { nextTick, onMounted, watch, ref, Ref } from 'vue'
  import * as echarts from 'echarts'
  import binchen from '@/assets/map/binchen.json'
  import binchenBj from '@/assets/map/binchenbianjie.json'
  import bus from '@/utils/bus'

  const chart = ref()

  const mapSelectName = ref()

  const props = defineProps()

  const selectChange = (name?: string) => {
    if (name != mapSelectName.value) {
      mapSelectName.value = name
      // this.$emit()
      var obj = {
        邹平市: 256200,
        博兴县: 256500,
        沾化区: 256800,
        无棣县: 251900,
        阳信县: 251800,
        惠民县: 251700,
        滨城区: 256600
      }
      var code = 0
      if (name) {
        code = obj[name]
      }

      bus.emit('change', code)
    }
  }

  const renderChart = () => {
    echarts.dispose(chart.value)
    const eChart = echarts.init(chart.value)
    const aspectScale = 0.75
    const option = {
      toolbox: {
        feature: {
          myTool: {
            show: true, //是否显示
            title: '切换全市', //鼠标悬空的提示文字
            icon: 'path://M3.8,33.4 M47,18.9h9.8V8.7 M56.3,20.1 C52.1,9,40.5,0.6,26.8,2.1C12.6,3.7,1.6,16.2,2.1,30.6 M13,41.1H3.1v10.2 M3.7,39.9c4.2,11.1,15.8,19.5,29.5,18 c14.2-1.6,25.2-14.1,24.7-28.5',
            iconStyle: {
              color: 'rgba(255, 255, 255, 0)',
              shadowColor: 'rgba(255, 255, 255, 0)',
              borderColor: '#ffffff',
              borderWidth: 1
            },
            emphasis: {
              iconStyle: {
                color: '#ffffff',
                textPosition: 'left'
              }
            },
            onclick: function () {
              if (mapSelectName.value) {
                eChart.dispatchAction({
                  type: 'unselect',
                  name: mapSelectName.value
                })
                selectChange()
              }
            }
          }
        }
      },
      visualMap: {
        type: 'continuous',
        left: 'right',
        itemWidth: 11,
        itemHeight: 93,
        min: 0,
        max: 100,
        // text: ['High', 'Low'],
        textStyle: {
          color: '#ffffff'
        },
        realtime: false,
        calculable: true,
        handleSize: '100%',
        handleStyle: {
          opacity: 0
        },
        color: ['#3b8aa5', '#379eb7', '#6abfd6'],
        show: true
      },
      // geo: {
      //   itemStyle: {
      //     borderWidth: 1,
      //     borderColor: 'rgba(3, 110, 241,0.1)',
      //     areaColor: 'rgb(3 110 241)',
      //     shadowColor: 'rgb(3 110 241)',
      //     shadowOffsetX: 0,
      //     shadowOffsetY: 15,
      //     opacity: 0.75
      //   }
      // },
      series: [
        {
          zoom: 1.2,
          aspectScale: aspectScale,
          type: 'map',
          mapType: '滨州市边界1',
          roam: false,
          itemStyle: {
            borderWidth: 1,
            borderColor: 'rgba(255, 255, 255, 0.5)',
            areaColor: 'rgb(150, 247, 248)',
            shadowColor: 'rgb(150, 247, 248)',
            shadowOffsetX: -2,
            shadowOffsetY: 4,
            opacity: 1
          },
          label: {
            show: false,
            color: '#fff',
            fontWeight: '900',
            fontSize: 12
          },
          emphasis: {
            disabled: true,
            label: {
              show: true,
              color: '#fff',
              fontWeight: '900',
              fontSize: 14
            }
          }
        },
        {
          zoom: 1.2,
          aspectScale: aspectScale,
          type: 'map',
          mapType: '滨州市边界2',
          roam: false,
          itemStyle: {
            borderWidth: 1,
            borderColor: 'rgba(255, 255, 255, 0.5)',
            areaColor: 'rgb(150, 247, 248)',
            shadowColor: 'rgb(150, 247, 248)',
            shadowOffsetX: -1,
            shadowOffsetY: 2,
            opacity: 1
          },
          label: {
            show: false,
            color: '#fff',
            fontWeight: '900',
            fontSize: 12
          },
          emphasis: {
            disabled: true,
            label: {
              show: true,
              color: '#fff',
              fontWeight: '900',
              fontSize: 14
            }
          }
        },
        {
          zoom: 1.2,
          aspectScale: aspectScale,
          type: 'map',
          mapType: '滨州市',
          roam: false,
          itemStyle: {
            borderColor: '#74D1DC'
          },
          label: {
            show: true,
            color: '#fff',
            fontWeight: '900',
            fontSize: 12
          },
          emphasis: {
            label: {
              show: true,
              color: '#fff',
              fontWeight: '900',
              fontSize: 14
            },
            itemStyle: {
              areaColor: '#11a7e6'
            }
          },
          select: {
            label: {
              show: true,
              color: '#fff',
              fontWeight: '900',
              fontSize: 14
            },
            itemStyle: {
              areaColor: '#11a7e6'
            }
          },
          data: [
            { name: '无棣县', value: 95 },
            { name: '沾化区', value: 95 },
            { name: '阳信县', value: 10 },
            { name: '滨城区', value: 50 },
            { name: '惠民县', value: 55 },
            { name: '博兴县', value: 5 },
            { name: '邹平市', value: 35 }
          ]
        }
      ]
    }
    eChart.setOption(option)
    eChart.on('click', (params) => {
      selectChange(params.name)
      eChart.dispatchAction({
        type: 'select',
        name: params.name
      })
    })
  }
  watch(
    props,
    () => {
      renderChart()
    },
    {
      deep: true
    }
  )
  onMounted(() => {
    nextTick(() => {
      echarts.registerMap('滨州市', binchen as any)
      echarts.registerMap('滨州市边界1', binchenBj as any)
      echarts.registerMap('滨州市边界2', binchenBj as any)
      renderChart()
    })
  })
</script>
<style lang="scss" scoped>
  .waper {
    width: 306px;
    height: 515px;
  }
</style>
